<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>

		<div id="app">
			{{fruits[0]}}
			{{fruits[1]}}
			{{fruits[2]}}
			<br>
			<h1 v-for='(item,index) in fruits'>
				{{index+1}}:{{item}}
			</h1>
			{{goods.title}}
			(属性值，属性名称)键值对
			<h1 v-for='(value,key)in goods'>
				{{key}}:{{value}}
			</h1>
			数字迭代，从1开始
			<h1 v-for='i in 10'>
				{{i}}
			</h1>
			1-100之间的偶数
			<template v-for='i in 100'>
				<h1 v-for='i%2==0'>
					{{i}}
				</h1>
			</template>
			<ul>
				<li v-for='(item,index) in shopCar'>
					标题:{{item.title}}<br>
					价格:{{item.price}}
				</li>
			</ul>
			二维数组
			<table border>
				<tr v-for='(row,r) in table'>
					<td v-for='(col,c) in row' :key='r+"-"+c'>{{col}}</td>
				</tr>
			</table>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						fruits: ["苹果", "香蕉", "梨", 1, false],
						veg: ['土豆', '生菜', '番茄'],
						goods: {
							title: '华为手机',
							price: 1999
						},
						shopCar: [{
								title: '小米手机',
								price: 1599
							},
							{
								title: '羽绒服',
								priice: 599
							}
						],
						table: [
							[1, 2, 5, 4, 6],
							[1, 2, 5, 4, 6],
							[1, 2, 5, 4, 6],
							[1, 2, 5, 4, 6],
							[1, 2, 5, 4, 6]
						]
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>